<template>
  <view class="coupons-page">
    <view class="page-header">
      <text class="page-title">我的优惠券</text>
      <view class="tab-tabs">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index"
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="switchTab(index)"
        >
          {{ tab }}
        </view>
      </view>
    </view>
    
    <view class="coupons-list" v-if="filteredCoupons.length > 0">
      <view 
        v-for="coupon in filteredCoupons" 
        :key="coupon.id"
        class="coupon-item"
        :class="{ expired: coupon.status === 'expired' }"
      >
        <view class="coupon-left">
          <view class="coupon-amount">
            <text class="amount-symbol">¥</text>
            <text class="amount-value">{{ coupon.amount }}</text>
          </view>
          <view class="coupon-condition">
            满{{ coupon.condition }}可用
          </view>
        </view>
        <view class="coupon-right">
          <view class="coupon-info">
            <text class="coupon-name">{{ coupon.name }}</text>
            <text class="coupon-desc">{{ coupon.description }}</text>
            <view class="coupon-validity">
              <text class="validity-text">有效期至：{{ coupon.expireDate }}</text>
            </view>
          </view>
          <view class="coupon-status">
            <text class="status-text" :class="coupon.status">{{ getStatusText(coupon.status) }}</text>
            <view class="use-btn" v-if="coupon.status === 'valid'" @click="useCoupon(coupon)">
              立即使用
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="empty-coupons" v-else>
      <text class="empty-icon">🎟️</text>
      <text class="empty-text">{{ getEmptyText() }}</text>
      <view class="go-shopping-btn" v-if="activeTab === 0" @click="goShopping">去购物</view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const activeTab = ref(0)
const tabs = ['可使用', '已使用', '已过期']

// 假数据
const coupons = ref([
  {
    id: 1,
    name: '新人专享券',
    description: '新用户专享优惠券',
    amount: 50,
    condition: 299,
    expireDate: '2024-02-15',
    status: 'valid'
  },
  {
    id: 2,
    name: '满减优惠券',
    description: '全场通用满减券',
    amount: 20,
    condition: 199,
    expireDate: '2024-01-20',
    status: 'used'
  },
  {
    id: 3,
    name: '限时特惠券',
    description: '限时特惠活动券',
    amount: 100,
    condition: 599,
    expireDate: '2024-01-10',
    status: 'expired'
  }
])

const filteredCoupons = computed(() => {
  switch (activeTab.value) {
    case 0: // 可使用
      return coupons.value.filter(coupon => coupon.status === 'valid')
    case 1: // 已使用
      return coupons.value.filter(coupon => coupon.status === 'used')
    case 2: // 已过期
      return coupons.value.filter(coupon => coupon.status === 'expired')
    default:
      return coupons.value
  }
})

const switchTab = (index) => {
  activeTab.value = index
}

const getStatusText = (status) => {
  switch (status) {
    case 'valid':
      return '可使用'
    case 'used':
      return '已使用'
    case 'expired':
      return '已过期'
    default:
      return '未知'
  }
}

const getEmptyText = () => {
  switch (activeTab.value) {
    case 0:
      return '暂无可用优惠券'
    case 1:
      return '暂无已使用优惠券'
    case 2:
      return '暂无已过期优惠券'
    default:
      return '暂无优惠券'
  }
}

const useCoupon = (coupon) => {
  uni.showModal({
    title: '使用优惠券',
    content: `确定要使用"${coupon.name}"优惠券吗？`,
    success: (res) => {
      if (res.confirm) {
        // 跳转到商城页面
        uni.switchTab({ url: '/pages/ShopPage/ShopPage' })
      }
    }
  })
}

const goShopping = () => {
  uni.switchTab({ url: '/pages/ShopPage/ShopPage' })
}
</script>

<style scoped>
.coupons-page {
  background: #f5f5f5;
  min-height: 100vh;
}
.page-header {
  background: #fff;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.page-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}
.tab-tabs {
  display: flex;
  background: #f5f5f5;
  border-radius: 20rpx;
  padding: 8rpx;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx;
  font-size: 26rpx;
  color: #666;
  border-radius: 15rpx;
  transition: all 0.3s;
}
.tab-item.active {
  background: #ff6b35;
  color: #fff;
}
.coupons-list {
  padding: 20rpx;
}
.coupon-item {
  display: flex;
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}
.coupon-item.expired {
  opacity: 0.6;
}
.coupon-left {
  background: linear-gradient(135deg, #ff6b35, #ff8c42);
  color: #fff;
  padding: 30rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 200rpx;
}
.coupon-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 10rpx;
}
.amount-symbol {
  font-size: 24rpx;
  margin-right: 5rpx;
}
.amount-value {
  font-size: 48rpx;
  font-weight: bold;
}
.coupon-condition {
  font-size: 22rpx;
  opacity: 0.9;
}
.coupon-right {
  flex: 1;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.coupon-info {
  flex: 1;
}
.coupon-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}
.coupon-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}
.coupon-validity {
  font-size: 22rpx;
  color: #999;
}
.coupon-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15rpx;
}
.status-text {
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}
.status-text.valid {
  color: #ff6b35;
  background: rgba(255, 107, 53, 0.1);
}
.status-text.used {
  color: #999;
  background: #f5f5f5;
}
.status-text.expired {
  color: #999;
  background: #f5f5f5;
}
.use-btn {
  background: #ff6b35;
  color: #fff;
  padding: 15rpx 30rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
}
.empty-coupons {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
}
.empty-icon {
  font-size: 120rpx;
  margin-bottom: 30rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}
.go-shopping-btn {
  background: #ff6b35;
  color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}
</style>
